<script setup lang="ts">
import SettingItem from "@/components/SettingItem.vue";
import {Config} from "@/utils/config";
import {Language, UrlOpenType} from "@/utils/constants";
import {RefreshRight} from "@element-plus/icons-vue";
import {saveConfig} from "@/utils/componentUtils";
import {config} from "@/store/modules/globals";

const urlOpenTypeArray = Object.entries(UrlOpenType).map(([key, value]) => ({ key, value }));
const languageArray = Object.entries(Language).map(([key, value]) => ({ key, value }));

console.log("config", config);

/**
 * 重置设置
 */
function resettingConfig() {
  let newConfig = new Config();
  config.fromConfig(newConfig);
  saveConfig();
}
</script>

<template>
  <setting-item
      name="空关键词折叠收藏夹"
      description="当收藏夹搜索关键词为空时，是否折叠收藏夹"
      :status="config.isCollapsedWhenBookmarkTreeNullSearch"
      :statusChange="saveConfig"
  >
  </setting-item>
  <setting-item
      name="保存书签页面状态"
      description="打开收藏夹时，是否恢复到之前的打开状态（开启此功能可能造成打开时的页面卡顿）"
      :status="config.isStoreBookmarkExpandStatus"
      :statusChange="saveConfig"
  >
  </setting-item>
  <setting-item
      name="收藏夹是否显示固钉"
      description="固钉用于一键返回顶部和收起展开的收藏夹（1.当页面高度超过200时，显示返回顶部；2.当页面有展开的收藏夹时，显示收起收藏夹）"
      :status="config.isShowAffix"
      :statusChange="saveConfig"
  >
  </setting-item>
  <setting-item
      name="实时更新书签"
      description="实时监听书签变化，自动同步更新浏览器书签至本插件"
      :status="config.watchBookmarkChange"
      :statusChange="saveConfig"
  >
  </setting-item>
  <setting-item
      name="链接打开方式"
      description="点击书签时，使用哪种方式打开链接"
  >
    <template #rightSlot>
      <el-select
          v-model="config.urlOpenType.value"
          size="large"
          style="width: 200px"
          @change="saveConfig"
      >
        <el-option
            v-for="item in urlOpenTypeArray"
            :key="item.key"
            :label="item.value"
            :value="item.key"
        />
      </el-select>
    </template>
  </setting-item>
  <setting-item
      name="语言"
      description=""
  >
    <template #rightSlot>
      <el-select
          v-model="config.language.value"
          size="large"
          style="width: 200px"
          @change="saveConfig"
          disabled
      >
        <el-option
            v-for="item in languageArray"
            :key="item.key"
            :label="item.value"
            :value="item.key"
        />
      </el-select>
    </template>
  </setting-item>
  <setting-item
      name="重置"
      description="将所有设置和配置全部恢复到最初的状态"
  >
    <template #rightSlot>
      <el-popconfirm
          confirm-button-text="确定"
          cancel-button-text="取消"
          title="是否重置？"
          hide-icon
          @confirm="resettingConfig"
          @cancel=""
      >
        <template #reference>
          <el-button plain size="large" :icon="RefreshRight">重置</el-button>
        </template>
      </el-popconfirm>
    </template>
  </setting-item>
</template>
<style>

</style>